<template>
  <div class="accusedetail">
    <!-- 右侧流程概览 -->
    <div class="step-list">
      <el-steps
        direction="vertical"
        :active="stepList.length-1"
      >
        <el-step
          v-for="item in stepList"
          :key="item.id"
          :title="item.name"
          :description="'备注：'+item.note"
        ></el-step>
      </el-steps>
    </div>
    <!-- 标题 -->
    <div class="common-title">
      <div>
        <em></em>
        <span>检举详情</span>
      </div>
      <!-- 面包屑导航区 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/welcome' }">纪检监察信息化平台</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/accuse/records' }">检举记录</el-breadcrumb-item>
        <el-breadcrumb-item>转办详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 列表部分 -->
    <div class="accuse-info-list">
      <div>
        <h2>当前状态</h2>
        <span class="wait">待处理</span>
      </div>
      <!-- 举报人信息 -->
      <div>
        <h2>举报人信息</h2>
        <el-row>
          <el-col :span="6">
            联系方式（手机）
          </el-col>
          <el-col :span="18">
            <el-input
              disabled
              v-model="person.phone"
            ></el-input>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            举报人姓名
          </el-col>
          <el-col :span="18">
            <el-input
              disabled
              v-model="person.name"
            ></el-input>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            举报人单位
          </el-col>
          <el-col :span="18">
            <el-input
              disabled
              v-model="person.company"
            ></el-input>
          </el-col>
        </el-row>
      </div>
      <!-- 被举报人信息 -->
      <div>
        <h2>被举报人信息</h2>
        <el-row>
          <el-col :span="6">
            被举报人姓名
          </el-col>
          <el-col :span="18">
            <el-input
              disabled
              v-model="accuse.name"
            ></el-input>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            被举报人所属单位
          </el-col>
          <el-col :span="18">
            <el-input
              disabled
              v-model="accuse.company"
            ></el-input>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            被举报人单位职务
          </el-col>
          <el-col :span="18">
            <el-input
              disabled
              v-model="accuse.job"
            ></el-input>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            被举报人单位职级
          </el-col>
          <el-col :span="18">
            <el-input
              disabled
              v-model="accuse.rank"
            ></el-input>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            被举报人政治面貌
          </el-col>
          <el-col :span="18">
            <el-input
              disabled
              v-model="accuse.status"
            ></el-input>
          </el-col>
        </el-row>
      </div>
      <!-- 检举相关信息 -->
      <div>
        <h2>检举相关信息</h2>
        <el-row>
          <el-col :span="6">
            举报类型
          </el-col>
          <el-col :span="18">
            <el-input
              disabled
              v-model="info.type"
            ></el-input>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            举报内容
          </el-col>
          <el-col :span="18">
            <el-input
              disabled
              type="textarea"
              v-model="info.desc"
            ></el-input>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      stepList: [
        {
          id: 1,
          name: '后勤部',
          note: '来自后勤部的备注',
        },
        {
          id: 2,
          name: '财务部',
          note: '来自财务部的备注',
        },
        {
          id: 3,
          name: '人事部',
          note: '来自人事部的备注',
        }
      ], // 步骤条
      person: {
        phone: '13131313131',
        name: '小明',
        company: '廉政公署',
      }, // 举报人信息
      accuse: {
        name: '小刚',
        company: '后勤部',
        job: '后勤主任',
        rank: '高级',
        status: '党员',
      }, // 被举报人信息
      info: {
        type: '检举控告类 - 违反六大纪律 - 违反生活纪律',
        desc: '举报内容',
      }, // 检举相关信息
      check: {
        radio: 1,
        company: '',
        note: '',
      }, // 审批或转办选择
      companyOpt: [
        {
          value: 1,
          label: '人事部'
        }, {
          value: 2,
          label: '法务部'
        },
        {
          value: 3,
          label: '后勤部'
        },
      ],// 单位下拉
    };
  },
  created() {
  },
  mounted() {

  },
  methods: {
  }
};
</script>

<style scoped lang="less">
.accusedetail {
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  position: relative;
  // 步骤条
  .step-list {
    padding: 20px;
    box-sizing: border-box;
    top: 40px;
    right: 25px;
    position: absolute;
    width: 20%;
    background: #ffffff;
    border-radius: 3px;
    box-shadow: 0px 1px 4px 0px rgba(0, 59, 129, 0.15);
    &:hover {
      box-shadow: 0px 6px 6px 0px rgba(0, 59, 129, 0.15);
    }
  }
  // 信息部分
  .accuse-info-list {
    height: 0;
    flex: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 15px;
    box-sizing: border-box;
    > div {
      width: 75%;
      padding: 20px 20px 0;
      box-sizing: border-box;
      box-shadow: 0px 1px 4px 0px rgba(0, 59, 129, 0.15);
      background: #ffffff;
      border-radius: 5px;
      margin-bottom: 20px;
      position: relative;
      span {
        font-size: 14px;
        display: table;
        right: 20px;
        top: 0;
        bottom: 0;
        margin: auto;
        position: absolute;
        padding: 0 5px;
        box-sizing: border-box;
        border-radius: 3px;
      }
      // 待处理颜色
      .wait {
        border: 1px solid #c91425;
        color: #c91425;
      }
      // 处理中颜色
      .doing {
        border: 1px solid #ff8741;
        color: #ff8741;
      }
      // 已完成颜色
      .done {
        border: 1px solid #1ebda7;
        color: #1ebda7;
      }
      &:hover {
        box-shadow: 0px 6px 6px 0px rgba(0, 59, 129, 0.15);
      }
      h2 {
        font-size: 16px;
        padding: 0;
        margin: 0;
        margin-bottom: 20px;
      }
      h3 {
        font-size: 16px;
        padding: 0;
        margin: 0;
      }
      p {
        margin: 0;
        font-size: 14px;
        color: #ff4949;
        margin-bottom: 20px;
      }
      .el-row {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        position: relative;
        .el-col {
          display: flex;
          align-items: center;
          &:last-of-type {
            justify-content: flex-end;
          }
        }
        b {
          position: absolute;
          color: #ff4949;
          left: -8px;
        }
      }
    }
  }
}
</style>
